<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <van-image width="100vw" height="200" :src="item.picUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 列表 -->
    <div style="text-align: center; margin-top: 10px">商品列表</div>
    <van-grid :column-num="2">
      <van-grid-item
        v-for="item in list"
        :key="item.id"
        icon="photo-o"
        text="文字"
        @click="toDetail(item.id)"
      >
        <van-image width="100%" height="160" :src="item.pic" />
        <div>{{ item.name }}</div>
        <div class="box">
          <span>
            ￥{{ item.minPrice }}
            <s>￥{{ item.originalPrice }}</s>
          </span>
          <span>
            <van-button type="primary" size="mini">购买</van-button>
          </span>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
// 引入接口
import { bannerList, goodsList } from "@/api/api";
// 引入ref
import { ref } from "vue";
// 引入路由
import { useRouter } from "vue-router";
let banner = ref([]);
let list = ref([]);

let router = useRouter();

bannerList().then((res) => {
  banner.value = res.data;
});

goodsList().then((res) => {
  list.value = res.data.slice(0, 2);
  console.log(list.value);
});

let toDetail = (id) => {
  router.push({
    name: "detail",
    query: {
      id,
    },
  });
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  background-color: #39a9ed;
}
.box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>